<template>
  <div class="mainpoem">
    <div class="left">
      <div class="titletype">
        <div class="son1">
          <span
            style="
              font-size: 22px;
              font-weight: bold;
              color: black;
              float: left;
            "
          >
            {{ title }}
          </span>

          <span
            style="display: block; cursor: pointer"
            :class="{ activeStyle: iszhankai, unactivemyStyle: !iszhankai }"
            @click="changeIsZhankai(true)"
            >列表</span
          >
          <span style="display: block" id="id-Xiexian">/</span>
          <span
            style="display: block; cursor: pointer"
            :class="{ activeStyle: !iszhankai, unactivemyStyle: iszhankai }"
            @click="changeIsZhankai(false)"
            >缩略</span
          >
        </div>
        <div
          :class="{ son2: true, heightStyle: isAuthorZhankai ? false : true }"
        >
          <div class="sleft">
            <span>作者：</span>
          </div>
          <div class="sright">
            <div
              v-for="item in authorItems"
              :key="item"
              class="topfenlei"
              @click="clickAuthor(item)"
            >
              {{ item }}
            </div>
          </div>
          <div class="sright2">
            <img
              :src="imgType"
              alt="展开"
              width="12"
              height="12"
              @click="clickType(1)"
            />
          </div>
        </div>
        <div
          :class="{ son2: true, heightStyle: isThemeZhankai ? false : true }"
        >
          <div class="sleft">
            <span>主题：</span>
          </div>
          <div class="sright">
            <div
              v-for="item in themeItems"
              :key="item"
              class="topfenlei"
              @click="clickTheme(item)"
            >
              {{ item }}
            </div>
          </div>
          <div class="sright2">
            <img
              :src="imgType1"
              alt="展开"
              width="12"
              height="12"
              @click="clickType(2)"
            />
          </div>
        </div>
        <div
          :class="{ son2: true, heightStyle: isDynastyZhaikai ? false : true }"
        >
          <div class="sleft">
            <span>朝代：</span>
          </div>
          <div class="sright">
            <div
              v-for="item in dynastyItems"
              :key="item"
              class="topfenlei"
              @click="clickDynasty(item)"
            >
              {{ item }}
            </div>
          </div>
          <div class="sright2">
            <img
              :src="imgType2"
              alt="展开"
              width="12"
              height="12"
              @click="clickType(3)"
            />
          </div>
        </div>
        <div class="son2" style="margin-bottom: 5px; border: 0px">
          <div class="sleft">
            <span>难度：</span>
          </div>
          <div class="sright">
            <div
              v-for="item in diffItems"
              :key="item"
              class="topfenlei"
              @click="clickDiff(item)"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div v-if="iszhankai" id="leftZhankai" style="display: block">
        <div class="sons" v-for="(item, index) in fenyeData" :key="index">
          <div class="cont">
            <!-- 标题 -->
            <h2
              style="font-weight: bold"
              class="title"
              @click="viewdetails(item.title, item.author, item.theme)"
            >
              {{ item.title }}
            </h2>
            <!-- 作者 朝代 -->
            <span class="source">{{ item.author }} {{ item.dynasty }}</span>
            <!-- 内容 -->
            <div class="contson">
              <div style="white-space: pre-wrap">{{ item.content }}</div>
            </div>
          </div>

          <div class="tool">
            <a-tooltip placement="bottom" title="下载">
              <div class="toolpinglun">
                <img
                  src="https://song.gushiwen.cn/siteimg/down-load.png"
                  alt="下载"
                  width="19"
                  height="19"
                  @click="jumpMobile"
                />
              </div>
            </a-tooltip>
            <a-tooltip placement="bottom" title="复制">
              <div class="toolpinglun" @click="copy(item.content)">
                <img
                  src="https://song.gushiwen.cn/siteimg/co-py.png"
                  alt="复制"
                  width="19"
                  height="19"
                />
              </div>
            </a-tooltip>
            <a-tooltip placement="bottom" title="详情">
              <div class="toolpinglun">
                <img
                  src="https://song.gushiwen.cn/siteimg/tool-more.png"
                  alt="详情"
                  width="19"
                  height="19"
                  style="cursor: pointer"
                  @click="viewdetails(item.title, item.author, item.theme)"
                />
              </div>
            </a-tooltip>
          </div>
        </div>

        <div class="pageStyle">
          <a-pagination
            showQuickJumper
            :defaultCurrent="2"
            :total="total"
            :hideOnSinglePage="true"
            @change="getFenyeData"
          />
        </div>
      </div>
      <div v-else class="suolue">
        <div class="typecont" style="border: 0px">
          <div
            class="suolueliebiao"
            v-for="(item, index) in fenleiData"
            :key="index"
          >
            <span
              class="suoluetitle"
              @click="viewdetails(item.title, item.author, item.theme)"
              >{{ item.title }}</span
            >
            <span>({{ item.author }})</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="juzioncont">
        <img
          style="
            float: left;
            margin-top: 15px;
            margin-bottom: 15px;
            margin-left: 25px;
            margin-right: 0px;
          "
          src="../../assets/QRcode.png"
          width="80"
          height="80"
        />
        <div style="font-size: 18px; margin-top: 14px; text-align: center">
          扫码下载
        </div>
        <div style="font-size: 18px; margin-top: 5px; text-align: center">
          诗言客户端
        </div>
        <p></p>
      </div>
      <div class="sons">
        <div class="title">
          <div class="titleleft"></div>
          作者
        </div>
        <div class="cont">
          <div
            v-for="item in authorItems"
            :key="item"
            class="fenlei"
            @click="clickAuthor(item)"
          >
            {{ item }}
          </div>
        </div>
      </div>

      <div class="sons">
        <div class="title">
          <div class="titleleft"></div>
          主题
        </div>
        <div class="cont">
          <div
            v-for="item in themeItems"
            :key="item"
            class="fenlei"
            @click="clickTheme(item)"
          >
            {{ item }}
          </div>
        </div>
      </div>

      <div class="sons">
        <div class="title">
          <div class="titleleft"></div>
          朝代
        </div>
        <div class="cont">
          <div
            v-for="item in dynastyItems"
            :key="item"
            class="fenlei"
            @click="clickDynasty(item)"
          >
            {{ item }}
          </div>
        </div>
      </div>

      <div class="sons">
        <div class="title">
          <div class="titleleft"></div>
          难度
        </div>
        <div class="cont">
          <div
            v-for="item in diffItems"
            :key="item"
            class="fenlei"
            @click="clickDiff(item)"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import useClipboard from "vue-clipboard3";
export default {
  name: "PoemHome",
  data() {
    return {
      iszhankai: true,
      isAuthorZhankai: false,
      isThemeZhankai: false,
      isDynastyZhaikai: false,
      isPageStyle: false,
      imgType: "https://song.gushiwen.cn/siteimg/jianTop.png",
      imgType1: "https://song.gushiwen.cn/siteimg/jianTop.png",
      imgType2: "https://song.gushiwen.cn/siteimg/jianTop.png",
      title: "",
      fenyeData: [],
      total: 1,
      fenleiData: [],
      authorItems: [
        "丘为",
        "佚名",
        "刘禹锡",
        "刘过",
        "刘长卿",
        "卓文君",
        "卢纶",
        "卢钺",
        "周邦彦",
        "孟浩然",
        "孟郊",
        "宋祁",
        "寇准",
        "屈原",
        "岑参",
        "岳飞",
        "崔护",
        "崔颢",
        "张九龄",
        "张岱",
        "张志和",
        "张敬忠",
        "张籍",
        "张继",
        "张耒",
        "张若虚",
        "徐再思",
        "徐锡麟",
        "文天祥",
        "晏殊",
        "曹植",
        "曾几",
        "朱熹",
        "李之仪",
        "李商隐",
        "李清照",
        "李煜",
        "李白",
        "李贺",
        "李欣",
        "杜牧",
        "杜甫",
        "杨万里",
        "杨巨源",
        "杨炯",
        "林逋",
        "查慎行",
        "柳宗元",
        "柳永",
        "欧阳修",
        "毛泽东",
        "汤显祖",
        "温庭筠",
        "王之涣",
        "王冕",
        "王勃",
        "王安石",
        "王建",
        "王昌龄",
        "王湾",
        "王绩",
        "王维",
        "王观",
        "白居易",
        "皮日休",
        "祖咏",
        "秦观",
        "纳兰性德",
        "翁卷",
        "苏味道",
        "苏舜钦",
        "苏轼",
        "范仲淹",
        "范成大",
        "蒋捷",
        "袁枚",
        "谢脁",
        "谢灵运",
        "谢道韫",
        "贺知章",
        "贺铸",
        "贾岛",
        "赵师秀",
        "辛弃疾",
        "郑燮",
        "释志南",
        "陆游",
        "陈子昂",
        "陈毅",
        "陈陶",
        "陶渊明",
        "雷震",
        "韦庄",
        "韦应物",
        "马致远",
        "高适",
        "高鼎",
        "鲁迅",
        "黄庭坚",
      ],
      themeItems: [
        "写景",
        "写雨",
        "写雪",
        "春天",
        "夏天",
        "秋天",
        "冬天",
        "山水",
        "思乡",
        "爱国",
        "爱情",
        "节日",
        "边塞",
        "送别",
        "忧国忧民",
        "惜春悲秋",
      ],
      dynastyItems: [
        "先秦",
        "两汉",
        "魏晋",
        "南北朝",
        "唐朝",
        "五代",
        "宋朝",
        "元朝",
        "明朝",
        "清朝",
        "近现代",
      ],
      diffItems: ["初级", "中级", "高级"],
    };
  },
  setup() {
    const { toClipboard } = useClipboard();
    const copy = async (text) => {
      try {
        await toClipboard(text); //实现复制
        alert("复制成功");
        console.log("Success");
      } catch (e) {
        console.error(e);
      }
    };
    return { copy };
  },
  methods: {
    getData() {
      this.$axios({
        method: "get",
        url: "/poetry/getAllPaging?pageNo=1&pageSize=20",
      })
        .then((res) => {
          this.title = "推荐诗文";
          this.fenleiData = res.data.data.records;
          this.total = this.fenleiData.length;
          this.fenyeData = this.fenleiData.slice(0, 10);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getFenyeData(page, pageSize) {
      this.fenyeData = this.fenleiData.slice(
        (page - 1) * pageSize,
        page * pageSize
      );
    },

    clickAuthor(authorName) {
      this.$axios({
        method: "get",
        url: "/poetry/getByAuthor?author=" + authorName,
      })
        .then((res) => {
          this.fenleiData = res.data.data;
          this.total = this.fenleiData.length;
          this.title = authorName + "的诗";
          this.fenyeData = this.fenleiData.slice(0, 10);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clickTheme(themeName) {
      this.$axios({
        method: "get",
        url: "/poetry/getByTheme?theme=" + themeName,
      })
        .then((res) => {
          this.title = "关于" + themeName + "的诗";
          this.fenleiData = res.data.data;
          this.total = this.fenleiData.length;
          this.fenyeData = this.fenleiData.slice(0, 10);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clickDynasty(dynastyName) {
      this.$axios({
        method: "get",
        url: "/poetry/getByDynasty?dynasty=" + dynastyName,
      })
        .then((res) => {
          this.fenleiData = res.data.data;
          this.total = this.fenleiData.length;
          this.title = dynastyName + "诗文";
          this.fenyeData = this.fenleiData.slice(0, 10);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clickDiff(diffName) {
      this.$axios({
        method: "get",
        url: "/poetry/getByDiff?diff=" + diffName,
      })
        .then((res) => {
          this.fenleiData = res.data.data;
          this.total = this.fenleiData.length;
          this.title = diffName + "诗文";
          this.fenyeData = this.fenleiData.slice(0, 10);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeIsZhankai(statue) {
      this.iszhankai = statue;
    },
    viewdetails(title, author, theme) {
      this.$router.push({
        path: `/poemcontent/${title}/${author}/${theme}`,
      });
    },
    jumpMobile() {
      this.$router.push({
        path: `/mobile`,
      });
    },
    clickType(zhankaiIndex) {
      switch (zhankaiIndex) {
        case 1:
          if (this.isAuthorZhankai) {
            this.imgType = "https://song.gushiwen.cn/siteimg/jianTop.png";
          } else {
            this.imgType = "https://song.gushiwen.cn/siteimg/jianBtn.png";
          }
          this.isAuthorZhankai = !this.isAuthorZhankai;
          break;
        case 2:
          if (this.isThemeZhankai) {
            this.imgType1 = "https://song.gushiwen.cn/siteimg/jianTop.png";
          } else {
            this.imgType1 = "https://song.gushiwen.cn/siteimg/jianBtn.png";
          }
          this.isThemeZhankai = !this.isThemeZhankai;
          break;
        case 3:
          if (this.isDynastyZhaikai) {
            this.imgType2 = "https://song.gushiwen.cn/siteimg/jianTop.png";
          } else {
            this.imgType2 = "https://song.gushiwen.cn/siteimg/jianBtn.png";
          }
          this.isDynastyZhaikai = !this.isDynastyZhaikai;
          break;
      }
    },
  },
  mounted() {
    this.getData();
    this.$emit("tellFather", { index: 0 });
  },
};
</script>

<style scoped>
.mainpoem {
  width: 1000px;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.mainpoem .left {
  width: 670px;
  clear: left;
  float: left;
}

.mainpoem .left .titletype {
  height: auto;
  margin-top: 20px;
  clear: both;
  background-color: white;
  box-shadow: rgb(221 221 221) 2px 2px 10px 2px;
  overflow: hidden;
  border: 1px solid #d7d5bc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.mainpoem .left .titletype .son1 {
  clear: both;
  height: 40px;
  line-height: 40px;
  margin-top: 5px;
  border-bottom: 1px solid #dad9d1;
  margin-left: 20px;
  margin-right: 20px;
}
.mainpoem .left .titletype .son1 .activeStyle {
  color: #19537d;
}

.mainpoem .left .titletype .son1 .unactivemyStyle {
  color: #999999;
}

.mainpoem .left .titletype .son1 span {
  float: right;
  font-size: 12px;
  height: 40px;
  line-height: 40px;
  font-weight: normal;
  color: #999999;
}

.mainpoem .left .titletype .son2 {
  width: 630px;
  margin-left: 20px;
  clear: both;
  border-bottom: 1px dashed #dad9d1;
  overflow: hidden;
  padding-bottom: 10px;
}

.mainpoem .left .titletype .heightStyle {
  height: 40px;
}

.mainpoem .left .titletype .sleft {
  width: 50px;
  float: left;
  color: #275f38;
}

.mainpoem .left .titletype .sleft span {
  float: left;
  margin-top: 14px;
  font-size: 14px;
}

.mainpoem .left .titletype .sright {
  width: 565px;
  float: left;
}

.mainpoem .left .titletype .sright .topfenlei {
  float: left;
  margin-top: 14px;
  width: 65px;
  font-size: 14px;
  color: #19537d;
  text-decoration: none;
  cursor: pointer;
}

.mainpoem .left .titletype .sright .topfenlei:hover {
  float: left;
  margin-top: 14px;
  width: 65px;
  font-size: 14px;
  color: #134061;
  text-decoration: underline;
  cursor: pointer;
}

.mainpoem .left .titletype .sright2 {
  width: 15px;
  float: right;
  margin-top: 14px;
}

.mainpoem .left .titletype .sright2 img {
  cursor: pointer;
}
.mainpoem .left .sons {
  height: auto;
  clear: both;
  background-color: white;
  box-shadow: rgb(221 221 221) 2px 2px 10px 2px;
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid #d7d5bc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.mainpoem .left .sons .cont {
  height: auto;
  clear: both;
  margin-top: 15px;
  font-size: 14px;
  margin-left: 20px;
  margin-right: 20px;
  line-height: 200%;
  overflow: hidden;
}

.mainpoem .left .sons .cont .title {
  font-size: 18px;
  line-height: 22px;
  height: 22px;
  margin-bottom: 10px;
  color: #19537d;
  text-decoration: none;
}
.mainpoem .left .sons .cont .title:hover {
  font-size: 18px;
  line-height: 22px;
  height: 22px;
  margin-bottom: 10px;
  color: #134061;
  text-decoration: underline;
  cursor: pointer;
}

.mainpoem .left .sons .source {
  font-size: 13px;
  color: #65645f;
}

.mainpoem .left .sons .cont .contson {
  clear: both;
  overflow: hidden;
  margin-top: 10px;
}

.mainpoem .left .sons .tool {
  height: 32px;
  clear: both;
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 3px;
}

.mainpoem .left .sons .tool .toolpinglun {
  height: 30px;
  float: left;
  width: auto;
  margin-left: 20px;
  cursor: pointer;
}

.pageStyle {
  float: right;
  margin-top: 10px;
  margin-bottom: 10px;
}

.pagesright .onlyread {
  pointer-events: none;
}

.mainpoem .left .suolue {
  height: auto;
  clear: both;
  background-color: white;
  box-shadow: rgb(221 221 221) 2px 2px 10px 2px;
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid #d7d5bc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.mainpoem .left .typecont {
  clear: both;
  border-bottom: 1px solid #dad9d1;
  overflow: hidden;
  padding-bottom: 15px;
  margin-left: 30px;
  float: left;
  width: 630px;
}

.mainpoem .left .typecont .suolueliebiao {
  width: 300px;
  background-image: url(https://song.gushiwen.cn/siteimg/bookdoc.jpg);
  background-repeat: no-repeat;
  background-position: left center;
  margin-top: 15px;
  float: left;
  color: #999999;
}

.mainpoem .left .typecont .suolueliebiao .suoluetitle {
  margin-left: 10px;
  font-size: 14px;
  float: left;
  color: #19537d;
  text-decoration: none;
}

.mainpoem .left .typecont .suolueliebiao .suoluetitle:hover {
  margin-left: 10px;
  font-size: 14px;
  float: left;
  color: #134061;
  text-decoration: underline;
  cursor: pointer;
}

.mainpoem .right {
  width: 300px;
  clear: right;
  float: right;
}

.mainpoem .right .juzioncont {
  clear: both;
  font-size: 14px;
  line-height: 200%;
  margin-top: 20px;
  float: left;
  width: 298px;
  background-color: white;
  box-shadow: rgb(221 221 221) 2px 2px 10px 2px;
  height: auto;
  line-height: 34px;
  border: 1px solid #d7d5bc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.mainpoem .right .sons {
  height: auto;
  width: 298px;
  margin-top: 20px;
  float: left;
  background-color: white;
  box-shadow: rgb(221 221 221) 2px 2px 10px 2px;
  overflow: hidden;
  border: 1px solid #d7d5bc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.mainpoem .right .sons .title {
  height: 25px;
  line-height: 25px;
  clear: both;
  font-weight: bold;
  font-size: 18px;
  margin-top: 20px;
  margin-left: 30px;
  overflow: hidden;
}

.mainpoem .right .sons .title .titleleft {
  height: 21px;
  width: 3px;
  margin-top: 1px;
  float: left;
  clear: left;
  background-color: #a2c241;
  margin-right: 8px;
}

.mainpoem .right .sons .cont {
  height: auto;
  clear: both;
  overflow: hidden;
  padding-bottom: 20px;
}

.mainpoem .right .sons .cont .fenlei {
  font-size: 14px;
  height: 22px;
  line-height: 20px;
  width: 70px;
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  text-align: center;
  border: 1px solid #dad9d1;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #19537d;
  cursor: pointer;
  text-decoration: none;
}
.mainpoem .right .sons .cont .fenlei:hover {
  font-size: 14px;
  height: 22px;
  line-height: 20px;
  width: 70px;
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  text-align: center;
  border: 1px solid #dad9d1;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #134061;
  cursor: pointer;
  text-decoration: underline;
}
</style>
